<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">

      <span v-if="!parentId">菜单页面内按钮详情</span>
      <span v-else>
        当前选中：<label style="color: #2530ff">{{ parentInfo }}</label>
        <label style="float: right;padding: 4px 10px;margin-top: -10px">
          <crud-opts :permission="permission" />
        </label>
      </span>
    </div>
    <div v-if="!parentId">
      <div class="my-code">点击菜单查看页面内按钮详情</div>
    </div>
    <div v-else>
      <el-table ref="table" :data="crud.data" border style="width: 100%" row-key="id" size="small" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" prop="id" width="45" />
        <el-table-column prop="title" label="按钮名称" />
        <el-table-column prop="code" label="code" min-width="80px" />
        <el-table-column v-if="permission.has('edit') || permission.has('del') " label="操作" width="130px" align="center" fixed="right">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表单 -->
    <eForm :menu-type="4" />
  </el-card>
</template>

<script>
import menuApis, { getMenus } from '@/api/sys/menu'
import CRUD, { presenter, header } from '@crud/crud'
import CrudOpts from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import eForm from './form'
export default {
  name: 'MenuButtonInfo',
  components: { eForm, udOperation, CrudOpts },
  mixins: [
    presenter(),
    header()
  ],
  props: {
    permission: {
      type: Map,
      default: () => { return new Map() }
    },
    parentId: {
      type: String, // 选择的菜单id
      default: () => { return null }
    },
    parentInfo: {
      type: String, // 选择的菜单名称
      default: () => { return null }
    }
  },
  cruds() {
    return [
      CRUD({ title: '菜单按钮',
        crudMethod: { ...menuApis },
        initDataMethod: getMenus,
        optShow: {
          edit: false,
          rightBar: false
        },
        queryOnPresenterCreated: false,
        query: { parentId: null, menuType: 4 }
      })
    ]
  },

  data() {
    return {
      buttonData: []
    }
  },
  watch: {
    parentId(newData, oldData) { // 监听选中的菜单
      if (newData && newData !== '0') {
        this.query.menuType = 4
        this.query.parentId = newData
        getMenus(this.query).then(res => {
          this.crud.data = res.data
          this.crud.resetDataStatus()
        })
      }
    }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.query.parentId = this.parentId
      this.query.menuType = 4
      return true
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      form.parentId = this.parentId
    }
  }

}
</script>

<style lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
